/*--------------------------------------------------------------
	#home style 2
--------------------------------------------------------------*/
/*--------------------------------------------------------------
#2.1	features-section
--------------------------------------------------------------*/
.features-section {
	margin-top: -131px;

	@include media-query(991px) {
		margin: 90px 0 0;
	}

	.feature-grids .grid {
		background-color: transparentize($black, 0.6);
		width: 33.33%;
		float: left;
		padding: 35px 25px 35px 100px;
		position: relative;

		@include media-query(991px) {
			background-color: $white;
			padding: 35px 25px;
			text-align: center;
			box-shadow: 0px 5px 47.2px 11.8px rgba(19, 30, 74, 0.1);
		}

		@include media-query(767px) {
			width: 100%;
			float: left;
		}
	}

	.feature-grids > .grid + .grid {
		border-left: 1px solid transparentize($white, 0.8);
	}

	.fi:before {
		font-size: 50px;
		font-size: calc-rem-value(50);
		color: $theme-primary-color;
	}

	.icon {
		position: absolute;
		left: 35px;

		@include media-query(991px) {
			position: relative;
			left: auto;
		}
	}

	.count {
		font-family: $heading-font;
		font-size: 30px;
		font-size: calc-rem-value(30);
		font-weight: bold;
		color: $white;

		@include media-query(991px) {
			color: $heading-color;
		}
	}

	h4 {
		font-size: 18px;
		font-size: calc-rem-value(18);
		color: $white;
		margin: 0;

		@include media-query(991px) {
			font-size: 16px;
			font-size: calc-rem-value(16);
			color: $heading-color;
			margin: 0.7em 0 0;
		}
	}
}


/*--------------------------------------------------------------
#2.2	service-section-s2
--------------------------------------------------------------*/
.service-section-s2 {
	padding-bottom: 33px;
	@include background-style("../images/dots.png", left top, 100%, no-repeat, local);

	@include media-query(991px) {
		padding-bottom: 23px;
	}

	@include media-query(767px) {
		padding-bottom: 13px;
	}

	.title-text {
		text-align: right;
		padding-top: 20px;

		@include media-query(991px) {
			text-align: left;
			margin-bottom: 50px;
			padding-top: 0;
		}
	}

	.service-grids {
		margin: 0 -15px;

		@include media-query(767px) {
			margin: 0 -7.5px;
		}

		.grid {
			width: calc(33.33% - 30px);
			float: left;
			margin: 0 15px 60px;

			@include media-query(991px) {
				width: calc(50% - 30px);
			}

			@include media-query(767px) {
				width: calc(50% - 15px);
				margin: 0 7.5px 60px;
			}

			@include media-query(600px) {
				width: calc(100% - 15px);
				float: none;
			}
		}


		h4 {
			font-size: 18px;
			font-size: calc-rem-value(18);
			margin: 1.4em 0 0.7em;

			@include media-query(767px) {
				font-size: 16px;
				font-size: calc-rem-value(16);
			}
		}

		h4 a {
			color: $heading-color;

			&:hover {
				color: $theme-primary-color;
			}
		}

		p {
			font-size: 15px;
			font-size: calc-rem-value(15);
			margin: 0 0 1em;

			@include media-query(767px) {
				font-size: 14px;
				font-size: calc-rem-value(14);
			}
		}

		.read-more {
			font-size: 15px;
			font-size: calc-rem-value(15);
			font-weight: 500;
			color: $heading-color;

			@include media-query(767px) {
				font-size: 14px;
				font-size: calc-rem-value(14);
			}

			&:hover {
				color: $theme-primary-color;
			}

			.fi:before {
				font-size: 15px;
				font-size: calc-rem-value(15);
			}
		}
	}
}


/*--------------------------------------------------------------
#2.3	featured-project-section-s2
--------------------------------------------------------------*/
.featured-project-section-s2 {
	padding-bottom: 0;

	.grid {
		@include transition-time(0.3s);
		overflow: hidden;
		position: relative;

		@include media-query(991px) {
			background-color: transparentize($theme-secondary-color, 0.1);
		}

		@include media-query(600px) {
			width: 100%;
			float: none;
		}
	}

	.img-holder {
		position: absolute;
		left: 0;
		top: 0;
	}

	.overlay {
		padding: 280px 60px 60px;
		position: relative;
		top: 60px;
		opacity: 0;
		@include transition-time(0.5s);

		@include media-query(991px) {
			padding: 80px 30px 50px;
			top: 0;
		}

	}

	.grid:hover {
		cursor: grab;
	}

	.grid:hover .overlay {
		background-color: transparentize($theme-secondary-color, 0.1);
		top: 0;
		opacity: 1;
	}

	.count {
		font-family: $heading-font;
		font-size: 40px;
		font-size: calc-rem-value(40);
		font-weight: bold;
		color: $white;

		@include media-query(991px) {
			font-size: 30px;
			font-size: calc-rem-value(30);
		}
	}

	h3 {
		font-size: 22px;
		font-size: calc-rem-value(22);
		color: $white;
		margin-bottom: 1em;

		@include media-query(991px) {
			font-size: 18px;
			font-size: calc-rem-value(18);
		}
	}

	.grid p {
		color: #cecccc;
		margin-bottom: 0;
		padding-bottom: 2em;
		@include transition-time(0.3s);

		@include media-query(991px) {
			font-size: 14px;
			font-size: calc-rem-value(14);
		}
	}

	.overlay > a {
		position: relative;
		top: 100px;

		@include media-query(991px) {
			top: 0;
		}
	}

	.grid:hover .overlay > a {
		top: 0;
	}
}

.featured-project-pg-section {
	margin-bottom: -20px;
}


/*--------------------------------------------------------------
#2.4	quote-section-s2
--------------------------------------------------------------*/
.quote-section-s2 {
	@extend .quote-section;

	.right-col {
		@include background-style("../images/quote-bg-s2.jpg", center center, cover, no-repeat, local);
	}
}